// 导入 ReactDOM
import ReactDOM from 'react-dom/client';

// 创建渲染根节点
const root = ReactDOM.createRoot(document.getElementById('root'));

const books1 = ['React', 'Vue', 'Angular'];
const jsx1 = <div>{books1}</div>;

const books2 = [
  <li key="1">React</li>,
  <li key="2">Vue</li>,
  <li key="3">Angular</li>,
];
const jsx2 = <ul>{books2}</ul>;

// 需求
const books3 = ['React', 'Vue', 'Angular'];
// 转化一下，数组中数据格式转换：map
const jsx3 = books3.map((item, index) => <li key={index}>《{item}》</li>);

// 渲染这个标签（React 元素）
root.render(<div>{jsx3}</div>);
